<template>
  <div class="loginbody">
    <div class="logindata">
      <div class="logintext">
        <h2>Welcome</h2>
      </div>
      <div class="formdata">
        <el-form ref="$$form" :model="form" :rules="form.date">
          <el-form-item prop="username">
            <el-input
                v-model="form.date.username"
                clearable
                placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="form.date.password"
                clearable
                placeholder="请输入密码"
                show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="butt">
        <el-button type="primary" @click="login()">登录</el-button>
        <el-button class="shou" @click="register">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, toRefs} from 'vue'
import XEUtils,{useErrorMessage} from '@/util'
import {Login} from "@/mock/request/login";
import router from "@/router";
import {setSession} from "@/util/localCache";
import {useStore} from "@/pinia";

let form = reactive({
  $$form:ref(),
  date:{
    username:'',
    password:''
  }
})
let store = useStore()
let {$$form} = toRefs(form)
let login = ()=>{
  if (form.date.password !== '' && form.date.username !== ''){
    let data = {
      username: form.date.username,
      password: form.date.password
    }
    Login(data).then((response:any)=>{
      let data = response.data.data
      setSession('login',data.date)
      store.ChangeState('login',data.date)
      router.push("/home")
    }).catch((error:any)=>{
      useErrorMessage(error)
    })
  }else {
    if (XEUtils.isEmpty(form.date.username)) {
      useErrorMessage("用户名不能为空")
      return
    }
    if (XEUtils.isEmpty(form.date.password)) {
      useErrorMessage("密码不能为空")
      return
    }
  }
}
let register = ()=>{
  window.open('http://localhost:9000/#/elasticsearch')
  useErrorMessage("这个功能还没做")
}
</script>

<style>
.loginbody {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("../assets/icon/wallhaven-m9md18.jpg");
  background-size: 100% 100%;
  background-position: center center;
  background-attachment:fixed;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
}

.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.logindata {
  margin: 300px auto;
  width: 400px;
  height: 300px;

}

.butt {
  margin-top: 10px;
  text-align: center;
}

.shou {
  cursor: pointer;
  color: #606266;
}

/*ui*/
/* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
}

/deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

} */
</style>

